<template>
	<view class="profile">
		<!-- <gyd-navbar back-color="#fff" :title="title" :isBack="false"></gyd-navbar> -->

		<nav-bg-cover :bottom="100">
			<view class="profile-statusbar">
				<view class="fixed-top">
					<view class="statusbar" :style="'height:' + statusbarHeight + 'px'"></view>
				</view>
				<view class="navbar" :style="'height:' + navbarHeight + 'px'"></view>
			</view>

			<view class="user-layer">
				<view class="user">
					<image class="avatar" :src="userInfo.avatar" mode="aspectFill"></image>
					<view class="info">
						<view class="name">{{userInfo.nickname}}</view>
						<view class="phone">{{userInfo.mobile}}</view>
						<!-- <view class="name">ID：{{userInfo.id}}</view> -->
						<view class="level">
							代理：
							<image class="icon" :src="imgHost+'/static/images/icon-level.png'" mode="aspectFill">
							</image>
							<text class="label">{{userInfo.member.agent_level_text}}</text>
						</view>
						<view class="level" v-if="userInfo.attract_level>0">
							招商：
							<image class="icon" :src="imgHost+'/static/images/icon-level.png'" mode="aspectFill">
							</image>
							<text class="label">{{userInfo.member.attract_level_text}}</text>
						</view>
						<view class="level" v-if="userInfo.operation_level>0">
							运营中心：
							<image class="icon" :src="imgHost+'/static/images/icon-level.png'" mode="aspectFill">
							</image>
							<text class="label">{{userInfo.member.operation_level_text}}</text>
						</view>
					</view>
				</view>

				<view class="main-grid">
					<u-grid class="grid-list" :border="false" :col="3">
						<u-grid-item class="grid-item" v-for="(item, index) in statisticalData" :key="index"
							@click="pageRoute(item.url)">
							<view class="label">
								<text class="name">{{ item.name }}</text>
								<u-icon name="arrow-right" size="15"></u-icon>
							</view>
							<view class="value">
								<text class="num">{{ item.value }}</text>
								<text class="unit">{{ item.unit }}</text>
							</view>
							<text class="desc">{{ item.desc }}</text>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
		</nav-bg-cover>

		<view class="content">
			<view class="tools-card">
				<view class="title">常用功能</view>
				<gyd-func-menu :menu_type="2" :col="4"></gyd-func-menu>
			</view>
		</view>

		<!-- 底部导航栏 -->
		<gyd-tabbar :current="3"></gyd-tabbar>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		ref,
		reactive,
		toRefs,
		inject,
		computed,
		onMounted,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		title: '我的',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		statisticalData: {},
		userInfo: util.getUserInfo(),
	});

	const statusbarHeight = ref(0);
	const navbarHeight = ref(0);
	const role = ref(cache.get('role', false));

	//在页面所有元素加载完成后执行（只执行一次）
	onLoad((opt) => {
		console.log('onLoad');
		if (opt.hasOwnProperty('id')) {
			console.log('传递参数', opt.id);
		}
		initData();
	});

	//在页面由不可见变为可见时执行（只要页面显示都会执行）
	onShow(() => {
		console.log('onShow');
	})

	//在页面解析完成之后执行
	onReady(() => {
		console.log('onReady');
		console.log('userInfo', state.userInfo);
	})

	onPullDownRefresh(() => {
		console.log('下拉刷新');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	})

	onReachBottom(() => {
		console.log('触底加载更多');
	})

	// 组件实例挂载到DOM后执行
	onMounted(() => {
		// 在这里执行其他需要在组件挂载后运行的代码
		// #ifdef APP
		statusbarHeight.value = plus.navigator.getStatusbarHeight();
		console.log('APP状态栏1', statusbarHeight.value)
		// #endif
		// #ifdef MP
		statusbarHeight.value = getStatusBarHeight();
		console.log('小程序状态栏1', statusbarHeight.value)
		// #endif
		navbarHeight.value = statusbarHeight.value + uni.upx2px(88);
		console.log('状态栏2', navbarHeight.value)
	});

	function getStatusBarHeight() {
		let statusBarHeight = 0;
		uni.getSystemInfo({
			success: function(info) {
				statusBarHeight = info.statusBarHeight;
			}
		});
		return statusBarHeight;
	}

	function initData() {
		state.statisticalData = [{
			name: '我的收益',
			value: '200.00',
			unit: '元',
			desc: '总计收益',
			url: '/agentPages/profit/profit',
		}, {
			name: '我的积分',
			value: '2400.00',
			unit: '',
			desc: '累计积分',
			url: '/agentPages/integral-manage/integral-manage',
		}, {
			name: '我的团队',
			value: '2',
			unit: '人',
			desc: '团队人数',
			url: '/agentPages/statistics/statistics?current=1',
		}];
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		statisticalData,
		userInfo,
	} = toRefs(state);
</script>

<style lang="scss">
	.profile {
		.user-layer {
			padding: 0 $m24;

			.user {
				@include f-between($align: center);
				padding: $m24 0;

				.avatar {
					width: 130rpx;
					height: 130rpx;
					background-color: #F7F7FB;
					border: 2rpx solid $white-color;
					border-radius: $radius-circle;
				}

				.info {
					flex: 1;
					margin-left: $m24;

					.name {
						color: $main-color;
						font-weight: bold;
						font-size: $font-36;
					}

					.phone {
						font-size: $font-24;
						color: $tips-color;
					}

					.desc {
						margin-top: $m8;
						color: $main-color;
					}

					.level {
						@include f-center($block: inline-flex);
						background-color: #7d97c8;
						padding: 0.2em 0.4em 0.2em 0.2em;
						border-radius: $radius-half;

						.icon {
							width: 32rpx;
							height: 32rpx;
						}

						.label {
							margin-left: $m8;
							line-height: 1;
							font-size: $font-30;
							color: $inverse-color;
							font-weight: 500;
						}
					}
				}
			}

			.main-grid {
				padding: $m16 0;
				background-color: $white-color;
				border-radius: $radius-16;

				.grid-list {
					.grid-item {
						.label {
							@include f-center;
							color: $main-color;

							.name {
								@include f-center;

								&::before {
									@include f-center;
									width: 4rpx;
									height: $font-28;
									margin-right: $m8;
									content: '';
									background-color: $primary-color;
									border-radius: $radius-half;
								}
							}
						}

						.value {
							color: $main-color;
							font-weight: bold;

							.num {
								font-size: $font-30;
								color: $primary-color;
							}

							.unit {
								font-size: $font-24;
							}
						}

						.desc {
							font-size: $font-24;
							color: $tips-color;
						}
					}
				}
			}
		}

		.content {
			position: relative;
			margin-top: -100rpx;
			padding: 0 $m24;

			.tools-card {
				margin: $m16 0;
				border-radius: $radius-16;
				background: #fff;

				.title {
					@include f-between($align: center);
					padding: $m24;
					font-size: $font-30;
					color: $main-color;
					font-weight: 500;
				}
			}
		}
	}
</style>